<template>
  <!-- 关键：所有属性连续写在 <a-table> 开始标签内，> 不单独换行 -->
  <a-table
    rowKey="id"
    size="middle"
    bordered
    :loading="loading"
    :columns="columns"
    :dataSource="tableDataWithTotal"
    :pagination="false"
  >
    <template slot="htmlSlot" slot-scope="text">
      <div v-html="text"></div>
    </template>

    <template slot="imgSlot" slot-scope="text,record">
      <div style="font-size: 12px;font-style: italic;">
        <span v-if="!text">无图片</span>
        <img v-else :src="getImgView(text)" :preview="record.id" alt="" style="max-width:80px;height:25px;"/>
      </div>
    </template>

    <template slot="fileSlot" slot-scope="text">
      <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
      <a-button
        v-else
        ghost
        type="primary"
        icon="download"
        size="small"
        @click="downloadFile(text)"
      >
        <span>下载</span>
      </a-button>
    </template>
  </a-table>
</template>

<script>
import { getAction } from '@api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'CwHealthFormSubTable',
  mixins: [JeecgListMixin],
  props: {
    record: {
      type: Object,
      default: null,
    }
  },
  data() {
    return {
      description: '体检表内嵌列表',
      disableMixinCreated: true,
      loading: false,
      dataSource: [],
      columns: [
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '在职、退休',
          align: 'center',
          dataIndex: 'zzTx_dictText'
        },
        {
          title: '性别',
          align: 'center',
          dataIndex: 'gender'
        },
        {
          title: '金额',
          align: 'center',
          dataIndex: 'money',
          customRender: (text) => {
            const money = Number(text)
            return isNaN(money) ? '0.00' : money.toFixed(2)
          }
        },
      ],
      url: {
        listByMainId: '/cw/cwTj/queryCwHealthFormByMainId',
      },
    }
  },
  computed: {
    tableDataWithTotal() {
      if (!this.dataSource || this.dataSource.length === 0) return []
      const newData = JSON.parse(JSON.stringify(this.dataSource))
      // 计算金额合计
      const totalMoney = newData.reduce((sum, item) => {
        const val = Number(item.money)
        return sum + (isNaN(val) ? 0 : val)
      }, 0)
      // 追加合计行
      newData.push({
        id: 'total_' + new Date().getTime(),
        name: '合计',
        zzTx_dictText: '',
        gender: '',
        money: totalMoney.toFixed(2),
      })
      return newData
    }
  },
  watch: {
    record: {
      immediate: true,
      handler() {
        if (this.record) {
          this.loadData(this.record)
        }
      }
    }
  },
  methods: {
    loadData(record) {
      this.loading = true
      this.dataSource = []
      getAction(this.url.listByMainId, { id: record.id })
        .then((res) => {
          if (res.success) {
            this.dataSource = res.result.records || []
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    downloadFile(text) {
    },
    getImgView(text) {
      return text
    }
  },
}
</script>

<style scoped>
/* 合计行样式，确保穿透生效 */
::v-deep .ant-table-tbody tr:last-child td {
  font-weight: bold;
  background-color: #f5f7fa !important;
  border-top: 1px solid #e8e8e8;
}
</style>